<template>
    <div class="page-container">
        <div class="form-container">
            <el-form
                :inline="true"
                label-suffix="："
                :label-width="'100px'"
                :size="'small'"
                ref="form">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="业务编号">
                            <el-input
                                v-model="query.doccode"
                                clearable
                                placeholder="请输入"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结算对象名称" label-width="100px">
                            <el-select
                                v-model="query.entId"
                                placeholder="请选择结算对象"
                                style="width: 100%"
                                clearable
                                filterable
                                remote
                                :remote-method="getBusDetail"
                                :loading="settlementLoading">
                                <el-option
                                    v-for="item in settlementList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right">{{ item.entFullname }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="提单号">
                            <el-input
                                v-model="query.BlNo"
                                clearable
                                placeholder="请输入"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发票号">
                            <el-input
                                v-model="query.invoice"
                                clearable
                                placeholder="请输入"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <div v-show="hidden">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="开航日期">
                                <el-date-picker
                                    v-model="sailTime"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    style="width: 100%"
                                    size="small"
                                    value-format="YYYY-MM-DD"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="装箱日期">
                                <el-date-picker
                                    v-model="packingTime"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    style="width: 100%"
                                    size="small"
                                    clearable
                                    value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="接单日期">
                                <el-date-picker
                                    v-model="recDateTime"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    size="small"
                                    style="width: 100%"
                                    clearable
                                    value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="开票日期">
                                <el-date-picker
                                    v-model="invoiceDateTime"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    size="small"
                                    style="width: 100%"
                                    clearable
                                    value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="审核日期">
                                <el-date-picker
                                    v-model="checkDateTime"
                                    type="daterange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    size="small"
                                    style="width: 100%"
                                    clearable
                                    value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客户单号">
                                <el-input
                                    v-model="query.CustDocNo"
                                    size="small"
                                    clearable
                                    placeholder="请输入">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="费用类型">
                                <el-select
                                    v-model="query.FeeCode"
                                    placeholder="请选择费用类型"
                                    style="width: 100%"
                                    clearable
                                    filterable
                                    remote
                                    :remote-method="getFeeType"
                                    :loading="feenameLoading">
                                    <el-option
                                        v-for="item in feenameList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="箱封号">
                                <el-input v-model="query.CtnNo" size="small" placeholder="请输入">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div> -->
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="业务员">
                            <el-select
                                v-model="query.saleId"
                                placeholder="请选择业务员"
                                style="width: 100%"
                                clearable
                                filterable
                                remote
                                :remote-method="getSalesman"
                                :loading="salesmanLoading">
                                <el-option
                                    v-for="item in salesman"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="收/付">
                            <el-select
                                v-model="query.isIncome"
                                placeholder=" "
                                style="width: 100%"
                                filterable>
                                <el-option label="全部" :value="''"> </el-option>
                                <el-option label="收" :value="1"> </el-option>
                                <el-option label="付" :value="0"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="币种">
                            <el-select
                                v-model="query.currency"
                                placeholder="请选择销账币种"
                                style="width: 100%"
                                clearable
                                filterable
                                remote
                                :remote-method="getCurrentData"
                                :loading="currentLoading">
                                <el-option
                                    v-for="item in current"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    <span style="float: left"> {{ item.label }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核状态">
                            <el-select
                                v-model="query.checkStatus"
                                placeholder="请选择审核状态"
                                style="width: 100%"
                                filterable
                                disabled>
                                <el-option
                                    v-for="item in aduitStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="对账单号">
                            <el-input
                                v-model="query.balanceNo"
                                clearable
                                placeholder="请输入"
                                style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开票状态">
                            <el-select
                                v-model="query.invoiceStatus"
                                placeholder=" "
                                style="width: 100%"
                                filterable>
                                <el-option label="全部" :value="''"> </el-option>
                                <el-option label="已开票" :value="1"> </el-option>
                                <el-option label="未开票" :value="0"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="核销状态">
                            <el-select
                                v-model="query.feeStatus"
                                placeholder="请选择核销状态"
                                style="width: 100%"
                                filterable>
                                <el-option
                                    v-for="item in WriteOffStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="flex-container">
                    <!-- <el-button
                        type="primary"
                        @click="hidden = !hidden"
                        size="small"
                        style="padding: 8px 15px">
                        <div class="flex-container">
                            <el-icon style="transform: rotate(90deg)">
                                <MoreFilled />
                            </el-icon>
                            {{ hidden ? '折叠' : '更多条件' }}
                        </div>
                    </el-button> -->
                    <el-button type="primary" icon="search" @click="getList" size="small">
                        搜索
                    </el-button>
                    <el-button type="info" icon="refresh" @click="reset" size="small">
                        重置
                    </el-button>
                </div>
            </el-form>
        </div>
        <div class="in-container" style="margin-top: 8px">
            <div class="btn-box">
                <el-button type="default" icon="RefreshRight" @click="getList"> </el-button>
                <!-- <el-button type="primary" @click="batchAduit(1)"> 发票登记 </el-button>
                <el-button type="primary" @click="batchAduit(0)"> 发票修改 </el-button> -->
                <el-button type="primary" icon="Edit" @click="modifyInvioce"> 发票登记 </el-button>
                <!-- <el-button type="primary" @click="downloadFile"> 导出EXCEL </el-button> -->
            </div>
            <!-- @update:option="upDataOption" -->
            <AppPageTable
                stripe
                :data="tableData.data"
                @change="getList"
                :height="525"
                :option="tableData.option"
                v-loading="tableLoading">
                <el-table-column type="selection" width="40" align="center" fixed="left" />
                <el-table-column
                    prop="doccode"
                    width="120"
                    label="业务编号"
                    align="center"
                    showOverflowTooltip>
                    <template #default="scope">
                        <span class="doccode-text" @click="toEditPage(scope.row)">{{
                            scope.row.doccode
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="blNo"
                    width="100"
                    align="center"
                    label="提单号"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column
                    prop="invoiceCode"
                    label="发票号"
                    align="center"
                    width="100"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column
                    prop="balanceDoccode"
                    width="100"
                    label="对账单号"
                    align="center"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column label="开票日期" align="center" width="100" showOverflowTooltip>
                    <template #default="scope">
                        {{
                            scope.row.invoiceDate
                                ? $utils.formatDateTime(scope.row.invoiceDate, 'YYYY-MM-DD')
                                : ''
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="开航日期" align="center" width="100" showOverflowTooltip>
                    <template #default="scope">
                        {{
                            scope.row.etd ? $utils.formatDateTime(scope.row.etd, 'YYYY-MM-DD') : ''
                        }}
                    </template>
                </el-table-column>
                <el-table-column label="装箱日期" align="center" width="100" showOverflowTooltip>
                    <template #default="scope">
                        {{
                            scope.row.packTime
                                ? $utils.formatDateTime(scope.row.packTime, 'YYYY-MM-DD')
                                : ''
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="vessel"
                    align="center"
                    label="船名"
                    showOverflowTooltip
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="voyage"
                    align="center"
                    label="航次"
                    width="100"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column
                    prop="portDepartureName"
                    align="center"
                    label="起运港"
                    width="100"
                    showOverflowTooltip>
                    <template #default="scope">
                        {{ scope.row.portDepartureName ? scope.row.portDepartureName : '' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="portDestinationName"
                    align="center"
                    label="目的港"
                    showOverflowTooltip
                    width="100">
                    <template #default="scope">
                        {{ scope.row.portDestinationName ? scope.row.portDestinationName : '' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="entFullname"
                    align="center"
                    label="结算对象名称"
                    width="150"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column label="收/付" align="center" width="100" showOverflowTooltip>
                    <template #default="scope">
                        {{ scope.row.isIncome == 1 ? '收款' : '付款' }}
                    </template>
                </el-table-column>
                <el-table-column label="类型" align="center" width="100">
                    <template #default="scope">
                        {{ scope.row.feeName }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="currency"
                    label="币种"
                    align="center"
                    width="100"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column
                    prop="totalmoney"
                    label="金额"
                    align="center"
                    width="100"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column
                    prop="verificationMoney"
                    label="已销金额"
                    align="center"
                    width="100"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column label="未销金额" align="center" width="100" showOverflowTooltip>
                    <template #default="scope">
                        {{ scope.row.totalmoney - scope.row.verificationMoney }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="natMoney"
                    width="100"
                    align="center"
                    label="折人民币"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column label="审核" align="center" width="100" showOverflowTooltip>
                    <template #default="scope">
                        {{ scope.row.checkStatus == 1 ? '已审' : '未审' }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="checkName"
                    width="100"
                    align="center"
                    label="审核人"
                    showOverflowTooltip>
                </el-table-column>
                <el-table-column
                    prop="checkTime"
                    width="100"
                    align="center"
                    label="审核日期"
                    showOverflowTooltip>
                    <template #default="scope">
                        {{
                            scope.row.checkTime
                                ? $utils.formatDateTime(scope.row.checkTime, 'YYYY-MM-DD HH:mm:ss')
                                : ''
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="feeMemo" align="center" label="备注" showOverflowTooltip>
                </el-table-column>
            </AppPageTable>
            <!-- 修改 -->
            <el-dialog
                v-model="show"
                title="改发票"
                width="520px"
                modal-class="modify-invoice-dailog">
                <el-form label-suffix="：" label-width="80px" size="small">
                    <el-form-item label="填发票">
                        <el-input
                            v-model="modfiyForm.invoiceCode"
                            placeholder="请输入"
                            style="width: 100%"></el-input>
                    </el-form-item>
                    <el-form-item label="填日期">
                        <el-date-picker
                            v-model="modfiyForm.invoiceDate"
                            type="date"
                            placeholder="请选择"
                            style="width: 100%"
                            value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-form>

                <template #footer>
                    <div class="button-container">
                        <el-button type="default" @click="show = false">取消</el-button>
                        <el-button type="primary" @click="modifySubmit">确定</el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 统计结果 -->
            <!-- <div class="statistical-results">
                <el-row>
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">合计</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._in"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._out"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=利润</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.amount._profit"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">已核对</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._in"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._out"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=利润</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.checked._profit"
                                :key="index">
                                <div class="statistical-text" v-if="tableData.data.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="8">
                        <div class="statistical-tip"></div>
                        <div class="statistical-label">选中</div>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">应收</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._in"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">-应付</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._out"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="12">
                            <el-col :span="4">
                                <div class="statistical-text" style="color: #000000a6">=利润</div>
                            </el-col>
                            <el-col
                                :span="6"
                                v-for="(item, index) in resultStatistical.selected._profit"
                                :key="index">
                                <div
                                    class="statistical-text"
                                    v-if="tableData.option.selected.length">
                                    {{ item.currency }}&nbsp;{{ item.money }}
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div> -->
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import AppPageTable, { useTableOption } from '@/components/AppPageTable2'
import request from '@/public/request'
import dayjs from 'dayjs'
import { MoreFilled } from '@element-plus/icons'
export default defineComponent({
    components: {
        AppPageTable,
        MoreFilled,
    },
    data() {
        return {
            // 查询条件
            query: {
                doccode: '', //业务编号
                entId: '', //结算对象名称
                invoice: '', //发票号
                blNo: '', //提单号
                saleId: '', //业务员
                feeStatus: 0, //核销状态
                balanceNo: '', //对账单号
                checkStatus: 1, //审核状态
                currency: '', //币种
                // CustDocNo: '', //客户单号
                // FeeCode: '', //费用类型
                // CtnNo: '', //箱封号
                isIncome: '', //收支类型 0 付款 1 收款
                invoiceStatus: 0, //开票状态 0 未开票 1 已开票
                // StartEtd: '', //起始开航日,
                // EndEtd: '', //截止开航日
                // StartPackTime: '', //开始装箱日
                // EndPackTime: '', //结束装箱日
                // StartRecTime: '', //起始接单日
                // EndRecTime: '', //结束接单日
                // StartInvoiceTime: '', //起始开票日
                // EndInvoiceTime: '', //结束开票日
                // StartCheckTime: '', //起始审核日
                // EndCheckTime: '', //结束审核日
            },
            //表格数据
            tableData: {
                data: [],
                option: useTableOption(),
            },
            tableLoading: false,
            // 展开
            hidden: false,
            // 结算对象的数据
            settlementList: [],
            settlementLoading: false,
            // 币种
            current: [],
            // 业务员
            salesman: [],
            salesmanLoading: false,
            // 核销状态
            WriteOffStatus: [
                {
                    label: '全部',
                    value: '',
                },
                {
                    label: '未核销',
                    value: 0,
                },
                {
                    label: '已核销',
                    value: 1,
                },
            ],
            // 审核状态
            aduitStatus: [
                {
                    label: '全部',
                    value: '',
                },
                {
                    label: '未审核',
                    value: 0,
                },
                {
                    label: '已审核',
                    value: 1,
                },
            ],
            //费用类型
            feenameList: [],
            feenameLoading: false,
            // 币种数组
            curList: [],
            currentLoading: false,
            // 统计计算
            resultStatistical: {
                // 合计
                amount: {
                    _in: [],
                    _out: [],
                    _profit: [],
                },
                // 已核对
                checked: {
                    _in: [],
                    _out: [],
                    _profit: [],
                },
                //选中
                selected: {
                    _in: [],
                    _out: [],
                    _profit: [],
                },
            },
            show: false,
            // 发票修改信息
            modfiyForm: {
                ids: [],
                invoiceCode: '',
                invoiceDate: '',
            },
        }
    },
    computed: {
        // 开航日
        sailTime: {
            get: function () {
                return [this.query.StartEtd, this.query.EndEtd]
            },
            set: function (val) {
                if (val) {
                    this.query.StartEtd = val[0]
                    this.query.EndEtd = val[1]
                } else {
                    this.query.StartEtd = ''
                    this.query.EndEtd = ''
                }
            },
        },
        // 装箱日期
        packingTime: {
            get: function () {
                return [this.query.StartPackTime, this.query.EndPackTime]
            },
            set: function (val) {
                if (val) {
                    this.query.StartPackTime = val[0]
                    this.query.EndPackTime = val[1]
                } else {
                    this.query.StartPackTime = ''
                    this.query.EndPackTime = ''
                }
            },
        },
        // 接单日期
        recDateTime: {
            get: function () {
                return [this.query.StartRecTime, this.query.EndRecTime]
            },
            set: function (val) {
                if (val) {
                    this.query.StartRecTime = val[0]
                    this.query.EndRecTime = val[1]
                } else {
                    this.query.StartRecTime = ''
                    this.query.EndRecTime = ''
                }
            },
        },
        // 开票日期
        invoiceDateTime: {
            get: function () {
                return [this.query.StartInvoiceTime, this.query.EndInvoiceTime]
            },
            set: function (val) {
                if (val) {
                    this.query.StartInvoiceTime = val[0]
                    this.query.EndInvoiceTime = val[1]
                } else {
                    this.query.StartInvoiceTime = ''
                    this.query.EndInvoiceTime = ''
                }
            },
        },
        // 审核日期
        checkDateTime: {
            get: function () {
                return [this.query.StartCheckTime, this.query.EndCheckTime]
            },
            set: function (val) {
                if (val) {
                    this.query.StartCheckTime = val[0]
                    this.query.EndCheckTime = val[1]
                } else {
                    this.query.StartCheckTime = ''
                    this.query.EndCheckTime = ''
                }
            },
        },
    },
    methods: {
        // 获取币种类型
        async getCurrentData(val) {
            this.currentLoading = true
            let res = await this.$http.get('/api/base/currency/dropdownlist', {
                keywords: val,
            })
            this.current = res.map((item) => {
                return {
                    label: item.currencyCode + '|' + item.currencyName,
                    value: item.currencyCode,
                }
            })
            this.currentLoading = false
        },

        // 获取列表数据
        async getList() {
            let search = {
                PageIndex: this.tableData.option.page,
                PageSize: this.tableData.option.pageSize,
                ...this.query,
            }
            // let queryKeysList = Object.keys(this.query)
            // for (const iterator of queryKeysList) {
            //     if (this.query[iterator] !== '' && this.query[iterator] !== -2) {
            //         let keyObject = {
            //             key: iterator,
            //             value: this.query[iterator],
            //         }
            //         search.feeParams.push(keyObject)
            //     }
            // }
            // search.feeParams.forEach((val) => {
            //     if (val.value === undefined) {
            //         delete val.key
            //     }
            // })
            this.tableLoading = true
            let res = await this.$http.post('/api/docworkfee/getWorkFee', search)
            // let outCountKeysList = Object.keys(res.data.statInfo)
            // for (const iterator of outCountKeysList) {
            //     if (iterator == 'total') {
            //         this.resultStatistical.amount = res.data.statInfo[iterator]
            //     } else if (iterator == 'verification') {
            //         this.resultStatistical.checked = res.data.statInfo[iterator]
            //     }
            //     this.statisticCurResult(res.data.statInfo[iterator]._in)
            // }
            res.content.forEach((item) => {
                if (item.portDeparture) {
                    item.portDepartureName = item.portDeparture?.portName
                } else {
                    item.portDepartureName = ''
                }
                if (item.portDestination) {
                    item.portDestinationName = item.portDestination?.portName
                } else {
                    item.portDestinationName = ''
                }
            })
            this.tableData.data = res.content
            this.tableData.option.total = res.totalElements
            this.tableLoading = false
        },

        // 统计个币种的计算结果
        statisticCurResult(list) {
            for (const iterator of list) {
                if (this.curList.indexOf(iterator.currency) === -1) {
                    this.curList.push(iterator.currency)
                }
            }
        },

        // 复选框变动
        upDataOption(inOption) {
            let selected = this.tableData.option.selected
            this.resultStatistical.selected = {
                _in: [],
                _out: [],
                _profit: [],
            }
            for (const iterator of this.curList) {
                let curObj = {
                    currency: iterator,
                    money: 0,
                }
                this.resultStatistical.selected._in.push(JSON.parse(JSON.stringify(curObj)))
                this.resultStatistical.selected._out.push(JSON.parse(JSON.stringify(curObj)))
                this.resultStatistical.selected._profit.push(JSON.parse(JSON.stringify(curObj)))
            }
            for (const item of selected) {
                if (this.curList.indexOf(item.currency) != -1) {
                    if (item.isIncome == 1) {
                        this.addCurCount(
                            item.getTotalmoney,
                            item.currency,
                            this.resultStatistical.selected._in
                        )
                    } else if (item.isIncome == 0) {
                        this.addCurCount(
                            item.getTotalmoney,
                            item.currency,
                            this.resultStatistical.selected._out
                        )
                    }
                }
            }
            // 计算各币种对应的利润
            for (const iterator of this.resultStatistical.selected._profit) {
                let index = this.curList.indexOf(iterator.currency)
                let _in = this.resultStatistical.selected._in
                let _out = this.resultStatistical.selected._out
                let _profit = this.resultStatistical.selected._profit
                _profit[index].money = _in[index].money - _out[index].money
            }
        },

        addCurCount(curMoney, cur, list) {
            for (const iterator of list) {
                if (iterator.currency == cur) {
                    iterator.money += curMoney
                }
            }
        },

        // 重置
        reset() {
            this.query = {
                doccode: '', //业务编号
                entId: '', //结算对象名称
                invoice: '', //发票号
                blNo: '', //提单号
                saleId: '', //业务员
                feeStatus: 0, //核销状态
                balanceNo: '', //对账单号
                checkStatus: 1, //审核状态
                currency: '', //币种
                isIncome: '', //收支类型 0 付款 1 收款
                invoiceStatus: 0, //开票状态 0 未开票 1 已开票
            }
            this.getList()
        },

        // 批量审核和取消==
        // async batchAduit(val) {
        //     if (!this.tableData.option.selected.length) {
        //         this.$message.warning('请选择数据')
        //         return
        //     }
        //     let req = {
        //         ids: [],
        //         checkStatus: val,
        //     }
        //     for (const iterator of this.tableData.option.selected) {
        //         req.ids.push(iterator.id)
        //     }
        //     let res = await this.$http.post('/api/docworkfee/checkTable', req)
        //     if (res.status) {
        //         this.getList()
        //         this.$message.success('成功')
        //     } else {
        //         this.$message.warning(res.message)
        //     }
        // },

        // 修改发票
        async modifyInvioce() {
            if (!this.tableData.option.selected.length) {
                this.$message.warning('请选择数据')
                return
            }
            this.modfiyForm = {
                ids: [],
                invoiceCode: '',
                invoiceDate: '',
            }
            for (const iterator of this.tableData.option.selected) {
                this.modfiyForm.ids.push(iterator.id)
            }
            this.show = true
        },

        async modifySubmit() {
            if (!this.modfiyForm.invoiceCode || !this.modfiyForm.invoiceDate) {
                this.$message.warning('请填写发票号和日期')
                return
            }
            let res = await this.$http.post('/api/docworkfee/changeInvoice', this.modfiyForm)
            if (res.status) {
                this.getList()
                this.$message.success('成功')
                this.show = false
            } else {
                this.$message.warning(res.message)
            }
        },

        // 跳转业务详情页面
        toEditPage(row) {
            this.$router.openTab({
                path: '/business/docDetail',
                query: {
                    id: row.docId,
                    title: `业务详情${row.doccode}`,
                    iscopy: false,
                    tab: '费用信息',
                },
            })
        },

        // 导出excel
        // async downloadFile() {
        //     let feeParams = []
        //     let query = JSON.parse(JSON.stringify(this.query))
        //     let queryKeysLsit = Object.keys(query)
        //     for (const iterator of queryKeysLsit) {
        //         if (query[iterator] !== '' && query[iterator] !== -2) {
        //             let keyObject = {
        //                 key: iterator,
        //                 value: query[iterator],
        //             }
        //             feeParams.push(keyObject)
        //         }
        //     }
        //     const res = await request.downloadByPost('/api/docworkfee/workfeeFileDownload', {
        //         feeParams: feeParams,
        //     })
        //     console.log(res, '3333333333')

        //     // const reg = /(?=filename\*=UTF-8'').*/;
        //     // let filename = reg.exec(res.header["content-disposition"]);
        //     // filename = decodeURI(filename[0].replace(/filename\*=UTF-8''/, ""));
        //     // const url = URL.createObjectURL(res.blob);
        //     // const a = document.createElement("a");
        //     // a.id = "down-" + new Date().getTime();
        //     // a.setAttribute("href", url);
        //     // a.download = filename;
        //     // a.click();
        //     // URL.revokeObjectURL(a.href);
        // },

        // 获取结算对象的数据
        async getBusDetail(val) {
            this.settlementLoading = true
            let res = await this.$http.get('/api/buenterprise/dropdownlist', {
                KeyWords: val,
            })
            res.forEach((item) => {
                item.label = item.entCode
                item.value = item.id
            })
            this.settlementList = res
            this.settlementLoading = false
        },

        // 获取业务员
        async getSalesman(val) {
            this.salesmanLoading = true
            let res = await this.$http.get('/api/user/userList', {
                keyword: val,
            })
            res.forEach((item) => {
                item.label = item.nickName
                item.value = item.id
            })
            this.salesman = res
            this.salesmanLoading = false
        },

        // 获取费用类型
        async getFeeType(val) {
            this.feenameLoading = true
            let res = await this.$http.get('/api/base/feetype/query', {
                KeyWords: val,
            })
            res.content.forEach((item) => {
                item.label = item.feeName
                item.value = item.feeName
            })
            this.feenameList = res.content
            this.feenameLoading = false
        },
    },
    watch: {},

    created() {
        // this.getList();
        // this.getCurrentData();
    },
})
</script>

<style lang="scss" scoped>
.form-container {
    border: 1px solid #e8e8e8;
    padding: 6px 6px 6px 8px;
    background-color: #ffffff;

    :deep(.el-form-item--small .el-form-item__label) {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.85);
    }

    :deep(.el-input--suffix .el-input__inner) {
        padding-right: 4px;
    }

    :deep(.el-form--inline .el-form-item) {
        display: flex;
        margin-right: 0;
    }

    :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 8px;
    }
}

.in-container {
    height: auto;
}

.btn-box {
    margin-bottom: 8px;
}

.flex-container {
    display: flex;
}

.statistical-results {
    padding-left: 20px;
    padding-right: 20px;

    .statistical-tip {
        display: inline-block;
        background: #2867c9;
        width: 4px;
        height: 20px;
        vertical-align: middle;
        margin-left: -20px;
    }

    .statistical-label {
        margin: 0 16px;
        display: inline-block;
        font-weight: 600;
        color: #000000a6;
    }

    .statistical-text {
        color: red;
        font-size: 12px;
        line-height: 18px;
    }
}

.doccode-text {
    color: rgb(24, 144, 255);
    cursor: pointer;
}

.button-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>

<style lang="scss">
.modify-invoice-dailog {
    .el-dialog__header {
        border-bottom: 1px solid #e8e8e8;
    }

    .el-dialog__footer {
        border-top: 1px solid #e8e8e8;
    }
}
</style>
